
import ProTable from '@ant-design/pro-table';
import type { ProColumns } from '@ant-design/pro-table';
import { Modal } from 'antd';
import React, { useState } from 'react';
import {Dealer} from '../../model';
import request from '@/utils/request';

export type FormValueType = {
    target?: string;
    template?: string;
    type?: string;
    time?: string;
    frequency?: string;
  } & Partial<Dealer>;

  
export type ChooseProps = {
    onCancel: (flag?: boolean, formVals?: FormValueType) => void;
    onSubmit: (values: Dealer[]) => Promise<void>;
    modalVisible: boolean;
    values: Partial<Dealer>[];
    mode:string;
  };

  
const DealerDialog: React.FC<ChooseProps> = (props)=>{

  const [selectedRowsState, setSelectedRows] = useState<Dealer[]>([]);
  const rowSelection = {
    onChange: (key:any, selectedRows:Dealer[]) => {
      setSelectedRows(selectedRows);
    }
  };

    async function dealerListData(params: any) {
      if(props.mode==='single'){
        params.level="一级";
      }
      var data =  request('/xwyl/dealer/dealerListData', {
        params,
      });
      return data;
    }

    const columns: ProColumns<Dealer>[] = [
        {
          title:'客户代码',
          dataIndex: 'loginName',
          renderText:()=>'CODE0001'
        },
        {
          title:"客户名称",
          dataIndex: 'cnName',
          renderText:()=>'上海交通大学医学院附属仁济医院'
        },
        {
          title:"联系人",
          dataIndex: 'cnName',
          renderText:()=>'张XXX'
        },
        {
          title:"联系电话",
          dataIndex: 'phone',
          renderText:()=>'15123456433'
        },
        // {
        //   title:"客户等级",
        //   dataIndex: 'level',
        //   valueType:'select',
        //   hideInSearch:props.mode==='single',
        //   valueEnum:{
        //       "一级":{ text: '一级' },
        //       "二级":{ text: '二级' },
        //   }
        // },
        {
          title:"操作",
          valueType: 'option',
          hideInTable:props.mode!='single',
          render: (text, record,_, action) => [
            <a
              key="editable"
              onClick={() => {
                props.onSubmit([record]);
              }}
            >
              选择
            </a>
          ],
        },
      ];

    return (
        <Modal
        title="选择客户"
        width={1000}
        destroyOnClose={true}
        visible={props.modalVisible}
        onCancel={()=>{
            props.onCancel();
        }}
        onOk={()=>{
          if(props.mode!='single'){
            props.onSubmit(selectedRowsState);
            setSelectedRows([]);
          }else{
            props.onCancel();
          }
      }}
      >
        <ProTable<Dealer>
          headerTitle='客户列表'
          toolBarRender={false}
          dataSource={[{id:'1111'},{id:'2222'}]}
          // request={async(params, sorter, filter) => dealerListData({ ...params, sorter, filter })}
          columns={columns}
          rowKey="id"
          rowSelection={props.mode==='single'?false:{ type: "checkbox",
          ...rowSelection,}}
          search={{
              filterType: 'query',
              layout: 'horizontal',
          }}
          />
      </Modal>
    );
}
export default DealerDialog;